<template>
  <div class="wrap-banner">
    <template v-if="!skeletonLoading">
      <div class="wrap-banner-lf">
        <div class="title-item">
          <span>All Categories</span>
        </div>
        <div
          class="lf-item"
          v-for="(item, index) in leftItems"
          @click="searchBannerData(item)"
          :key="item.name"
        >
          <el-icon style="margin-right: 5px" size="18"><Folder /></el-icon>
          <span>{{ item.name }}</span>
          <div class="item-child">
            <div
              v-for="child in item.children"
              @click.stop="searchBannerData(child)"
            >
              {{ child.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="wrap-banner-md">
        <el-carousel class="md-carousel" :autoplay="true">
          <el-carousel-item v-for="item in carouselImgs" :key="item.img">
            <el-image
              :src="item.img"
              style="height: 100%; width: 100%"
            ></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div class="wrap-banner-rt">
        <div class="title">Quick Sourcing</div>
        <div class="source">
          <el-input
            class="source-input"
            size="large"
            placeholder="Please enter product link"
          ></el-input>
          <el-button size="large" class="source-btn" color="#FA4756"
            >Request for Sourcing</el-button
          >
        </div>
        <div class="delivery">
          <div class="header">
            <span>Delivery Time</span>
            <div class="ship">
              <span>Shipping Calculation</span>
              <span style="margin-left: 5px">></span>
            </div>
          </div>
          <div class="content">
            <div class="info">
              <img :src="trumpetImg" class="info-img" alt="" /> Order 158***419
              placed by ***on has been delivered for a period of 18 days from
              <img :src="deliveryLfCurrent.img" class="info-subimg" alt="" />
              to
              <img :src="deliveryRtCurrent.img" alt="" class="info-subimg" />
            </div>
            <div class="pos">
              <el-dropdown trigger="click" @command="handleDeliveryLf">
                <div class="el-dropdown-link">
                  <img
                    :src="deliveryLfCurrent.img"
                    class="delivery-img"
                    alt=""
                  />
                  <el-icon class="el-icon--right" size="18px">
                    <arrow-down />
                  </el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :style="
                        deliveryLfCurrent.img === lang.img
                          ? { background: '#ecf5ff', color: '#3F6AFF' }
                          : ''
                      "
                      v-for="lang in [
                        {
                          img: zhImg,
                          name: 'China'
                        }
                      ]"
                      :command="lang"
                      :key="lang.name"
                    >
                      <img
                        :src="lang.img"
                        alt=""
                        style="width: 24px; height: 18px; margin-right: 5px"
                      />
                      <span>{{ lang.name }}</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div style="margin: 0 12px; height: 28px">
                <img :src="vectorImg" alt="" />
              </div>
              <el-dropdown trigger="click" @command="handleDeliveryRt">
                <div class="el-dropdown-link">
                  <img
                    :src="deliveryRtCurrent.img"
                    alt=""
                    class="delivery-img"
                  />
                  <el-icon class="el-icon--right" size="18px">
                    <arrow-down />
                  </el-icon>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :style="
                        deliveryRtCurrent.img === lang.img
                          ? { background: '#ecf5ff', color: '#3F6AFF' }
                          : ''
                      "
                      v-for="lang in langList"
                      :command="lang"
                      :key="lang.name"
                    >
                      <img
                        :src="lang.img"
                        alt=""
                        style="width: 24px; height: 18px; margin-right: 5px"
                      />
                      <span>{{ lang.name }}</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div> -->
    </template>
    <template v-else>
      <!-- left -->
      <div class="skeleton-lf">
        <el-skeleton animated class="lf-inner">
          <template #template>
            <el-skeleton-item variant="p" class="inner-header" />
            <div class="inner-item">
              <el-skeleton-item
                class="item-line"
                variant="p"
                v-for="item in leftItems.length"
              />
            </div>
          </template>
        </el-skeleton>
      </div>
      <!-- middle -->
      <div class="skeleton-md">
        <el-skeleton animated class="md-inner">
          <template #template>
            <el-skeleton-item
              variant="image"
              style="width: 100%; height: 100%"
            />
          </template>
        </el-skeleton>
      </div>
      <!-- right -->
      <!-- <div class="skeleton-rt">
        <div class="rt-title">
          <el-skeleton animated>
            <template #template>
              <div class="inner-item">
                <el-skeleton-item class="item-line" variant="p" />
              </div>
            </template>
          </el-skeleton>
        </div>
        <div class="rt-top">
          <el-skeleton animated>
            <template #template>
              <div class="inner-item">
                <el-skeleton-item class="item-line" variant="p" />
                <el-skeleton-item class="item-line" variant="p" />
              </div>
            </template>
          </el-skeleton>
        </div>
        <div class="rt-bottom">
          <el-skeleton animated>
            <template #template>
              <div class="inner-header">
                <el-skeleton-item class="item-line" variant="p" />
              </div>
              <div class="inner-item">
                <el-skeleton-item class="item-line1" variant="p" />
                <el-skeleton-item class="item-line2" variant="p" style="" />
              </div>
            </template>
          </el-skeleton>
        </div>
      </div> -->
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router/router'
import { HeaderStore } from '@/store/modules/header'
// import trumpetImg from '@/assets/images/trumpet.png'
// import zhImg from '@/assets/images/zh.png'
// import enImg from '@/assets/images/en.png'
// import brImg from '@/assets/images/br.png'
// import esImg from '@/assets/images/es.png'
// import vectorImg from '@/assets/images/vector.png'

const props = defineProps({
  skeletonLoading: {
    type: Boolean,
    default: false
  }
})

const headerStore = HeaderStore()

// wrap 部分
const carouselImgs = ref([
  {
    img: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
  },
  {
    img: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
  },
  {
    img: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
  },
  {
    img: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
  },
  {
    img: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg'
  }
])

// 左侧分类
const leftItems = ref([
  {
    name: '服装',
    children: [
      {
        name: '男装'
      },
      {
        name: '女装'
      },
      {
        name: '童装'
      }
    ]
  },
  {
    name: '饰品',
    children: [
      {
        name: '手表'
      },
      {
        name: '首饰'
      },
      {
        name: '服装搭配'
      },
      {
        name: '发饰'
      }
    ]
  },
  {
    name: '鞋靴',
    children: [
      {
        name: '男鞋'
      },
      {
        name: '女鞋'
      }
    ]
  },
  {
    name: '箱包'
  },
  {
    name: '母婴用品',
    children: [
      {
        name: '妈妈用品'
      },
      {
        name: '婴童用品'
      }
    ]
  },
  {
    name: '护肤彩妆'
  },
  {
    name: '家装建材'
  },
  {
    name: '家居用品'
  },
  {
    name: '个护清洁'
  },
  {
    name: '汽车用品'
  },
  {
    name: '数码家电'
  },
  {
    name: '办公用品'
  },
  {
    name: '宠物园艺'
  }
])

// develivery
// const langList = ref([
//   {
//     img: enImg,
//     name: 'English'
//   },
//   {
//     img: brImg,
//     name: 'Brazil'
//   },
//   {
//     img: esImg,
//     name: 'Spain'
//   }
// ])
// const deliveryLfCurrent = ref({
//   img: zhImg,
//   name: 'China'
// })

// const deliveryRtCurrent = ref({
//   img: enImg,
//   name: 'English'
// })

// const handleDeliveryLf = (item: any) => {
//   deliveryLfCurrent.value = item
// }

// const handleDeliveryRt = (item: any) => {
//   deliveryRtCurrent.value = item
// }

const searchBannerData = (item: any) => {
  router.push('/searchdetail')
  localStorage.setItem('searchValue', item.name)
}
</script>

<style lang="scss" scoped>
.wrap-banner {
  width: inherit;
  height: inherit;
  display: flex;
  .wrap-banner-lf {
    width: 240px;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    .title-item {
      height: 32px;
      display: flex;
      font-size: 18px;
      background-color: #fa4756;
      justify-content: center;
      align-items: center;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      color: #fff;
    }
    .lf-item {
      display: flex;
      flex: 1;
      align-items: center;
      padding-left: 16px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      &:hover {
        > span {
          color: #fa4756;
        }
        .item-child {
          display: block;
        }
      }
      .item-child {
        position: absolute;
        z-index: 10;
        left: 242px;
        top: 0;
        width: 160px;
        padding: 0 16px;
        border-radius: 8px;
        box-shadow: 0px 2px 4px 0px #00000033;
        background-color: #fff;
        display: none;
        > div {
          padding: 5px 0;
          &:hover {
            color: #fa4756;
          }
        }
      }
    }
  }
  .wrap-banner-md {
    flex: 1;
    // margin: 0 12px;
    margin-left: 12px;
    border-radius: 8px;
    height: 100%;
    .md-carousel {
      height: 100%;
      border-radius: 8px;
      :deep(.el-carousel__container) {
        height: 100%;
      }
    }
  }
  .wrap-banner-rt {
    width: 300px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    .title {
      height: 48px;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-left: 16px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-bottom: 1px solid #e9e9ec;
    }
    .source {
      height: 188px;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      background-color: #fff;
      .source-input {
        padding: 40px 16px 24px 16px;
      }
      .source-btn {
        width: calc(100% - 32px);
        margin-left: 16px;
      }
    }
    .delivery {
      margin-top: 12px;
      flex: 1;
      background-color: #fff;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      .header {
        height: 48px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9e9ec;
        .ship {
          font-size: 12px;
          cursor: pointer;
          color: #999999;
        }
      }
      .content {
        padding: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
        .info {
          font-size: 12px;
          line-height: 18px;
          .info-img {
            vertical-align: bottom;
          }
          .info-subimg {
            width: 18px;
            vertical-align: middle;
          }
        }
        .pos {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .el-dropdown-link {
          display: flex;
          align-items: center;
          .delivery-img {
            width: 40px;
            height: 30px;
            border-radius: 3px;
            margin-right: 5px;
          }
        }
      }
    }
  }
  // 骨架屏
  .skeleton-lf {
    width: 240px;
    background-color: #fff;
    .lf-inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 10px;
      .inner-header {
        height: 30px;
        width: 80%;
        margin-top: 10px;
      }
      .inner-item {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        .item-line {
          width: 95%;
          flex: 1;
          margin-top: 5px;
        }
      }
    }
  }
  .skeleton-md {
    background-color: #fff;
    margin: 0 12px;
    border-radius: 8px;
    padding: 10px;
    flex: 1;
    .md-inner {
      width: 100%;
      height: 100%;
    }
  }
  .skeleton-rt {
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .rt-title {
      height: 48px;
      background-color: #fff;
      padding: 20px;
      box-sizing: border-box;
      .item-line {
        width: 50%;
        height: 30px;
      }
    }
    .rt-top {
      height: 188px;
      padding: 20px;
      background-color: #fff;
      box-sizing: border-box;

      .item-line {
        margin-top: 20px;
        height: 50px;
      }
    }
    .rt-bottom {
      padding: 0 20px;
      margin-top: 12px;
      flex: 1;
      background-color: #fff;
      .inner-header {
        margin: 6px 0;
      }
      .item-line {
        height: 30px;
      }
      .inner-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .item-line1 {
          height: 50px;
        }
        .item-line2 {
          height: 60px;
          width: 60%;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
